<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>拼团</title>
  <link rel="stylesheet" href="{WEB_RESOURCE}/active3/css/weui.min.css">
  <link rel="stylesheet" href="{WEB_RESOURCE}/active3/css/public.css">
  <link rel="stylesheet" href="{WEB_RESOURCE}/active3/css/index.css">
  <link rel="stylesheet" href="{WEB_RESOURCE}/frame.css">
  <style id="dshow_style">
    body{position:fixed;width:100%}
    #body{visibility:hidden;opacity:0;transition:linear .4s}
  </style>
</head>
<body>
    <!-- 顶部 -->
    <div id="body">
        <!-- <div><img src="{media $row['cover']}" width="100%"></div> -->
    <div class="head">
        <img :src="act.cover" alt="">
    </div>
    <!-- 顶部 -->
    <!-- 活动简介 -->
    <div class="intro">
        <div class="weui_cells_title">
            <span>■</span>活动简介
        </div>
        <div class="weui_cells weui_cells_form">
            <div class="weui-cell clearfix">
                <div class="weui_cell_bd weui_cell_primary primary">
                <marquee><span id="title">{{act.title}}</span></marquee>
                <!-- <marquee><span id="title">史上最强优惠！祝贺心园米罗总部进驻万科创意园，触觉绘画常规班两个月8节课只要100元，暑假班24节课只要400元</span></marquee> -->
                </div>
            </div>
            <div class="weui_cell clearfix">
                <div class="weui_cell_hd">
                    <label for="" class="weui_label">活动主办方</label>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <span id="zbfName">{{act.service_name}}</span>
                </div>
            </div>
            <div class="weui_cell clearfix">
                <div class="weui_cell_hd">
                    <label for="" class="weui_label">主办方电话</label>
                </div>
                <div class="weui_cell_bd weui_cell_primary">                  
                    <span id="zbfPhone">{{act.service_mobiles}}</span>
                </div>
            </div>
            <div class="weui_cell clearfix">
                <div class="weui_cell_hd">
                    <label for="" class="weui_label">每批次人数</label>
                </div>
                <div class="weui_cell_bd weui_cell_primary">                   
                    <span id="num">{{group_max}}</span>
                </div>
            </div>
        </div>
    </div>
    <!-- 活动简介 -->
    <!-- 参团 -->
    <div class="attend" v-show="open_attend">
        <div id="search">
            <div class="weui-search-bar weui-search-bar_focusing" id="Div2">
                <div class="weui-search-bar__box">
                    <i class="weui-icon-search"></i>
                    <input v-model="na" name="Keyword" type="text" maxlength="20" id="Keyword" class="weui-search-bar__input" placeholder="请输入团长的关键字" required="">
                </div>
                <!-- <label class="weui-search-bar__label" id="searchText">
                    <i class="weui-icon-search"></i>
                    <span>搜索</span>
                </label> -->
                <input type="button" name="searchbnt" value="搜索" id="searchbnt" class="weui-search-bar__cancel-btn1" @click="search">
            </div>
        </div>
        <!-- 参团列表 -->
        <div class="team">
            <table class="list" >
                <tr>
                    <th></th>
                    <th>团长 ↑</th>
                    <th>参团进度</th>
                    <th>尾号</th>
                    <th>参加活动</th>
                </tr>
                <tr v-for="group in groups">
                    <td class="num">{{group.id}}</td>
                    <td class="name">{{group.name}}</td>
                    <td class="schedule">
                        <!-- <span class="plan">{{group.other_total}}/{{group.maxtotal}}</span> -->
                        <span class="plan">{{percent(group)}}%</span>
                        <progress :value="group.other_total" :max="group.maxtotal">
                        </progress>
                    </td>
                    <td class="phone">{{group.mobile}}</td>
                    <td class="activity" v-if="countdown <= 0">
                        <a href="">活动结束</a>
                    </td>
                    <td class="activity" v-else="countdown > 0">
                        <a id="attend" @click="joinGroup(group)">立即参团</a>
                    </td>
                </tr>
            </table>
            <div class="tuanList-foot clearfix">
                <p class="fl">团数(<span>{{group_count}}</span>)</p>
                <ul class="tuanList-btn fr clearfix">
                    <!-- <li id="previous-page"><a href=""><</a></li> -->
                    <li id="previous-page"><a href="javascript:;" @click="step(-1)"><</a></li>
                    <li id="page">{{page}}/{{group_page}}</li>
                    <!-- <li id="next-page"><a href="">></a></li> -->
                    <li id="next-page"><a href="javascript:;" @click="step(1)">></a></li> 
                </ul>
            </div>
        </div>
        <!-- 参团列表 -->
    </div>
    
    <!-- 参团 -->
    <!-- 团信息 -->

    <div class="tuanBtn">
        <div class="clearfix" v-if="countdown <= 0">
            <a class="weui-btn weui-btn_primary weui-btn_mini" @click="open_service = true" id="showCode">活动已结束</a>           
        </div>
        <!-- 参团没有开团 -->
        <div class="clearfix" v-else-if="isGroup != '' && isJoin != '' ">
            <template v-if="act.is_cav == 2">
                <a class="weui-btn weui-btn_warn weui-btn_mini two" id="share" @click="open_share = true">分享活动</a>
                <a class="weui-btn weui-btn_warn weui-btn_mini two"  @click="open_code = true">我的二c维码</a>
            </template>
            <template v-else>
                <a class="weui-btn weui-btn_warn" id="share" @click="open_share = true">分享活动</a>
            </template>
        </div>
        <div class="clearfix" v-else-if="isGroup == '' && isJoin != ''">
            <template v-if="act.is_cav == 2">
                <a class="weui-btn weui-btn_warn weui-btn_mini tocreate two">立即开团</a>
                <a class="weui-btn weui-btn_primary weui-btn_mini two" @click="open_code = true">我的二维码</a>
            </template>
            <template v-else>
                <a class="weui-btn weui-btn_warn weui-btn_mini tocreate two">立即开团</a>
                <a class="weui-btn weui-btn_warn weui-btn_mini two" @click="open_share = true">分享活动</a>
            </template>
        </div>
        <div class="clearfix" v-else-if="isJoin == ''"> 
            <a class="weui-btn weui-btn_warn weui-btn_mini two" @click="regis" id="showForms">我要开团</a>
            <a class="weui-btn weui-btn_warn weui-btn_mini two" @click="open_attend = true" id="showTuans">我要参团</a>           
        </div>
        <div>
            <a class="weui-btn weui-btn_primary " @click="open_service = true" id="showCode">添加主办方微信</a>
        </div>
        <div class="button-sp-area">
        </div>
    </div>
    <!-- 团信息 -->
    <!-- 我要开团 -->
    <div class="group" v-show="open_register" @click.stop.self="regis">
        <div class="register">
            <form :action="url.createOrder" id="form" name="form" method="POST" enctype="multipart/form-data">
                <input type="hidden" name="pid" :value="act.id">
                <input type="hidden" name="order_sn" id="order_sn" :value="myOrder.order_sn">
                <!-- <input type="hidden" name="oid" value="{php echo $_GPC['oid']}"> -->
                <div class="name" v-for="jim in act.joininformation" >
                    <p>{{jim.name}}</p>
                    <div v-if="jim.type == 1" style="display:inline;">
                        <input type="text" :name="'jim['+jim.name+']'" autocomplete="true" >
                    </div>
                    <div v-else="jim.type == 2" style="display:inline;">
                        <select class="form-control" :name="'jim['+jim.name+']'" >
                            <option value="">{{jim.placeholder}}</option>
                            <option :value="sec.name" v-for="sec in jim.select">{{sec.name}}</option>
                        </select>
                    </div>
                </div>
                <button class="btn-sub" type="submit" id="btn-sub">确认开团</button>
            </form>
        </div>
    </div>
    <!-- 我要开团 -->
    <!-- 我要参团 -->
    <div class="group1" v-show="open_join" @click.stop.self="join">
        <div class="register">
            <form :action="url.createOrder" id="form2" name="form2" method="POST" enctype="multipart/form-data">
                <input type="hidden" name="pid" :value="act.id">
                <input type="hidden" name="order_sn" id="order_sn" :value="myOrder.order_sn">
                <input type="hidden" name="gid" v-model="gid">
                <!-- <input type="hidden" name="oid" value="{php echo $_GPC['oid']}"> -->
                <div class="name" v-for="jim in act.joininformation" >
                    <p>{{jim.name}}</p>
                    <div v-if="jim.type == 1" style="display:inline;">
                        <input type="text" :name="'jim['+jim.name+']'" autocomplete="true" >
                    </div>
                    <div v-else="jim.type == 2" style="display:inline;">
                        <select class="form-control" :name="'jim['+jim.name+']'" >
                            <option value="">{{jim.placeholder}}</option>
                            <option :value="sec.name" v-for="sec in jim.select">{{sec.name}}</option>
                        </select>
                    </div>
                </div>
                <button class="btn-sub" type="submit" id="btn-sub">确认参团</button>
            </form>
        </div>
    </div>
        <!-- 我要参团 -->
    
    <!-- 添加主办方微信 -->
    <div class="show" v-show="open_service">
        <div class="wechat">
            <div class="we-title">主办方微信</div>
            <div class="code">
                <img :src="act.service_qrcode" alt="">
                <p>识别二维码添加主办方微信</p>
            </div>
            <div>
                <a class="weui-btn weui-btn_primary" @click="open_service = false" id="closeCode">关闭</a>
            </div>
        </div>
    </div>
    <!-- 添加主办方微信 -->
    <!-- 分享好友 -->
    <div class="outer" id="outer_share" v-show="open_share" style="display:block">
        <div class="outer-box">
            <div class="outer-header"><span>长按图片分享给好友</span></div>
            <div class="outer-body align-center">
                <img src="{php echo web2app_url('createdesign', ['pid'=>$active['id'], 'gid'=> $myOrder['id'] ?: $group['id'], 'rand'=>random(20)])}" class="full-image baseimg">
            </div>
            <div class="outer-footer"><a href="javascript:;" class="outer-close full" @click="open_share = false">关闭</a></div>
        </div>
    </div>

    <!-- 我的二维码 -->
    <div class="outer" id="outer_qrcode" v-show="open_code" style="display:block">
        <div class="outer-box">
            <div class="outer-header"><span>我的二维码</span></div>
            <div class="outer-body">
                <div><img src="{php echo purl('pinqrcode', ['pid'=>$row['id'], 'oid'=>$order['id'], 'rand'=>random(20)])}" class="media-shareimg2" style="width:100%"></div>
                <p>前往参加活动时，向工作人员出示此二维码。</p>
            </div>
            <div class="outer-footer"><a href="javascript:void(0)" class="outer-close full" @click="open_code = false">我知道了</a></div>
        </div>
    </div>
    <!-- 活动详情 -->
    <div class="detail">
        <div class="weui_cells_title">
            <span>■</span>活动详情
        </div>
        <div class="weui_cell clearfix">
            <div class="weui_cell_hd">
                <label for="" class="weui_label">距活动结束</label>
            </div>
            <div class="weui_cell_bd weui_cell_primary">
                <span class="countdown">
                    <span id="count"><span class="viewtime-day"></span>天<span class="viewtime-hour"></span>时<span class="viewtime-minute"></span>分<span class="viewtime-second"></span>秒</span>
                </span>
            </div>
        </div>
    </div>
    <!-- 活动详情 -->
    <!-- 详情信息 -->
    <div class="infor" v-html="act.content">
        
    </div>
    <!-- 详情信息 -->
    <div class="fix">
        <div class="btn-audio btn-ani">
            <img src="{WEB_RESOURCE}/active3/images/music.png" alt="">
            <audio id="music" autoplay="autoplay" loop="loop">
              <source :src="bgm" type="audio/mpeg" />
            </audio>
        </div>
        <div class="top">
            <p>参与人数：<span class="all">{{act.buyers}}</span> 浏览人次：<span class="least">{{act.views}}</span></p>
        </div>
        <!-- <a href="javascript:;" class="foot">
            快速招生：我也要开展活动!
        </a> -->
    </div>
</div>
    <script src="{WEB_RESOURCE}/library/require.min.js"></script>
    <script>
        require.config({
            baseUrl: '{WEB_RESOURCE}',
            paths: {
                'jquery': 'active3/js/jquery.min',
                'vue': 'library/vue',
                'frame': 'frame.require'
            },
            shim: {
                'jquery': {exports:'jquery'},
                'vue': {exports:'vue'},
                'frame': {deps:['jquery']}
            },
            proiority: ['jquery']
        });
    </script>
    <script>
        require(['jquery','vue'], function($, Vue) {
            new Vue({
                el: '#body',
                data: {
                    act: self.act,
                    myOrder: self.myOrder,
                    url:self.url,
                    isGroup:self.isGroup,
                    isJoin: self.isJoin,
                    open_service: false,
                    open_register:false,
                    open_join:false,
                    open_attend: false,
                    open_share:false,
                    open_code:false,
                    countdown: self.countdown,
                    groups: [],
                    page: 1,
                    showPrev: false,
                    showNext: false,
                    loading: false,

                    gid: '',
                    na: '',
                    group_page: 0,
                    group_count: 0
                },
                mounted: function() {},
                methods: {
                    join:function() {
                        var showJoin = this.open_join = false;
                        return showJoin;
                    },
                    regis:function() {
                        // this.open_register = this.open_register == false && this.countdown > 0;
                        if(this.open_register == false && this.countdown > 0) {
                            this.open_register = true;
                        } else {
                            this.open_register = false;
                        }
                    },
                    joinGroup: function(group) {
                        this.open_join = true;
                        this.gid = group.id;
                    },
                    search: function() {
                        var _this = this;
                        if(this.loading) {
                            return false;
                        }
                        this.loading = true;
                        this.loadData(1, function() {
                            _this.page = 1;
                            _this.loading = false;
                        });
                    },
                    loadData: function(page, callback) {
                        var _this = this;
                        $.post(this.url.loadGroup, {
                            'pid': this.act.id,
                            'name': _this.na,
                            'page': page
                        }, function(res) {
                            if(res.errno == 0) {
                                _this.groups.length = 0;
                                _this.groups.push(...res.data.list);
                                _this.group_page = res.data.group_page;
                                _this.group_count = res.data.group_count;
                                _this.showBundle(res.data.group_page, page);
                                callback && callback();
                            }
                        });
                    },
                    step: function(step) {
                        var _this = this;
                        if(this.page <= 1 && step < 0) {
                            return false;
                        }
                        if(this.page >= this.group_page && step > 0) {
                            return false;
                        }
                        if(this.loading) {
                            return false;
                        }
                        this.loading = true;
                        this.loadData(this.page + step, function() {
                            _this.page += step;
                            _this.loading = false;
                        });
                    },
                    showBundle: function(pageall, page) {
                        if(pageall <= 1) {
                            this.showPrev = false;
                            this.showNext = false;
                        } else {
                            // 最后一页
                            if(page >= pageall) {
                                this.showPrev = true;
                                this.showNext = false;
                            } else if(page == 1) {
                                this.showPrev = false;
                                this.showNext = true;
                            } else {
                                this.showPrev = true;
                                this.showNext = true;
                            }
                        }
                    },
                    percent:function(group) {
                        var per = (group.other_total/parseInt(group.maxtotal))*100;
                        per.toFixed(2);
                        return per;
                    }
                },
                watch: {
                    open_attend:function(value) {
                        if(value == true) {
                            this.loadData(this.page);
                        }
                    }
                },
                computed: {
                    group_max: function() {
                        var max = 0;
                        var group_map = this.act.group_map;
                        for(var i in group_map) {
                            if(group_map[i].members > max) {
                                max = group_map[i].members;
                            }
                        }
                        return max;
                    },
                    bgm: function() {
                        if(this.isJoin === '') {
                            return this.act.bgm;
                        } else {
                            return this.act.bgm2;
                        }
                    }
                }
            });
        });
    </script>
    <!-- <script src="{WEB_RESOURCE}/active3/js/jquery.min.js"></script> -->
    <script>
        require(['jquery', 'vue'], function($, Vue) {
            
            $.fn.extend({
                dshow: function() {
                    $(this).css({
                        'transition': 'linear .2s',
                        'visibility': 'visible',
                        'opacity': '1'
                    });
                    $('body').css('position', 'relative');
                    $('#dshow_style').remove();
                }
            });
            
            wx.ready(function() {
                // 展示页面
                $('#body').dshow();
                // 音乐控制器
                require(['jquery'], function($){
                    var audio=document.getElementById('music');    
                    $('.btn-audio').click(function(){
                        if(audio.paused){
                            $('.btn-audio').addClass('btn-ani');
                            audio.play();
                            return;
                        }else{
                            $('.btn-audio').removeClass('btn-ani');
                            audio.pause(); 
                        }
                    });
                });
                require(['jquery'], function($) {
                    //参团列表
                    $(function() {
                        var list = $('.list');
                        list.find('tr:even').css('background', '#fff');
                        list.find('tr:odd').css('background', '#eee')
                    });
                });

            });

            // 表单弹出提交处理 开团
            require(['jquery'], function($) {

                var can_submit = false;
                $('#form').on('submit', function() {
                    if(can_submit) {
                        return true;
                    }
                    $.post(self.url.createOrder, $('#form').serialize(), function(res) {
                        if(typeof res == 'string') {
                            res = JSON.parse(res);
                        }
                        if(res.errno != 0) {
                            alert(res.message);
                            return false;
                        }

                        var order_sn = res.data.tid;
                        var price = res.data.fee;
                        var pay_url = res.data.pay_url;

                        $('#order_sn').val(order_sn);

                        $('#form').prop('action', pay_url + self.url.pay_url_params +order_sn);
                        can_submit = true;
                        $('#form').submit();

                    });
                    return false;
                })
            });
            // 参团
            require(['jquery'], function($) {

                var can_submit = false;
                $('#form2').on('submit', function() {
                    if(can_submit) {
                        return true;
                    }
                    $.post(self.url.createOrder, $('#form2').serialize(), function(res) {
                        if(typeof res == 'string') {
                            res = JSON.parse(res);
                        }
                        if(res.errno != 0) {
                            alert(res.message);
                            return false;
                        }

                        var order_sn = res.data.tid;
                        var price = res.data.fee;
                        var pay_url = res.data.pay_url;

                        $('#order_sn2').val(order_sn);

                        $('#form2').prop('action', pay_url + self.url.pay_url_params+order_sn);
                        can_submit = true;
                        $('#form2').submit();

                        return false;
                    });
                    return false;
                })
            });

            // 立即开团，参团后可以进行开团操作，不需要支付
            require(['jquery'], function() {
                $('.tocreate').on('click', function() {
                    if(!confirm('确定开团吗？')) {
                        return false;
                    }
                    $.post(self.url.createMyGroup, {
                        'pid': self.act.id,
                        "order_sn": self.myOrder.order_sn,
                        "oid": "{$_GPC['oid']}"
                    }, function(res) {
                        alert(res.message);
                        if(res.errno == 0) {
                            if(res.data.url) {
                                location.href = res.data.url;
                            } else {
                                location.reload();
                            }
                        }
                    });
                });
            });
            // 分享 '{php echo purl("shareComplete")}', {pid: '{$active["id"]}'}
            {php echo js_share($active['share_text'], $active['share_desc'], $domainurl, tomedia($active['share_image']))}
            // $('.num').html($(this).parent().index());
            //倒计时
            require(['jquery', 'frame'], function($) {
                changeViewTime(self.countdown, '#count');
            });
            require(['jquery', 'frame'], function($) {
                img2base64('.baseimg');
            })
        });
        
    </script>
  
</body>
</html>